﻿@page "/gantt-chart/context-menu"

@using Syncfusion.Blazor.Gantt
@using BlazorDemos
@using ej2_blazor_ganttdata

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample demonstrates the various phases involved in constructing a residential house, from testing  the soil to handing over the fully constructed property to the owner. This also demonstrates the usage of default context menu in Gantt component. </p>
</SampleDescription>
<ActionDescription>
    <p>
        Gantt has an option to show the context menu while performing right click on it. You can configure the default and custom menu items in the context menu using the <code>ContextMenuItems</code> property.
        Each menu item will be displayed contextually based on its target. In this demo we have rendered following default items
    </p>
    <p>Default items:</p>
    <ul>
        <li><code>AutoFitAll</code> - Auto fit all columns.</li>
        <li><code>AutoFit</code> - Auto fit the current column.</li>
        <li><code>TaskInformation</code> - Edit the current record.</li>
        <li><code>DeleteTask</code> - Delete the current record.</li>
        <li><code>Save</code> - Save the edited record.</li>
        <li><code>Cancel</code> - Cancel the edited state.</li>
        <li><code>SortAscending </code> - Sort the current column in ascending order.</li>
        <li><code>SortDescending </code> - Sort the current column in descending order.</li>
        <li><code>DeleteDependency </code> - Delete the dependency of the current record.</li>
        <li><code>Convert </code> - Convert the normal task in to milestone task and vice versa.</li>
        <li>
            <code>Add</code>
            <ul>
                <li><code>Above</code> - Add a new row above the selected row </li>
                <li><code>Below</code> - Add a new row below the selected row</li>
                <li><code>Child</code> - Add a new row as child to the selected row</li>
                <li><code>Milestone</code> - Add a milestone task below to selected row</li>
            </ul>
        </li>
    </ul>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGantt EnableContextMenu="true" DataSource="@TaskCollection" Height="450px" Width="100%" HighlightWeekends="true"
                     Toolbar="@(new List<string>(){ "Add", "Edit", "Update", "Delete", "Cancel", "ExpandAll", "CollapseAll"})" AllowSorting="true" AllowResizing="true"
                     AllowSelection="true" GridLines="GridLine.Both" TreeColumnIndex="1"
                     ProjectStartDate="@ProjectStart" ProjectEndDate="@ProjectEnd">
                <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress"
                                 Dependency="Predecessor" ParentID="ParentId" Notes="Notes"></GanttTaskFields>

                <GanttEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" AllowTaskbarEditing="true"
                                   ShowDeleteConfirmDialog="true"></GanttEditSettings>

                <GanttLabelSettings LeftLabel="TaskName" TValue="GanttData.TaskData">
                </GanttLabelSettings>
                <GanttSplitterSettings Position="30%"> </GanttSplitterSettings>
            </SfGantt>
        </div>
    </div>
</div>

@code{

    public DateTime ProjectStart = new DateTime(2019, 3, 25);
    public DateTime ProjectEnd = new DateTime(2019, 7, 28);
    public List<GanttData.TaskData> TaskCollection { get; set; }
    protected override void OnInitialized()
    {
        this.TaskCollection = GanttData.EditingData();

    }
}